<template>
	<view class="main">	
	<view class="main_in">
		<view class="card">
			<view class="main_pic_box">
				<image class="main_pic" :src="cardInfo.pic" mode="aspectFit"></image>
			</view>
			<view class="detail">
				<input type="text" style="font-size: 40rpx" v-model="cardInfo.goodName" placeholder="商品名称" />
				<input type="text" style="font-size: 30rpx" v-model="cardInfo.detail" placeholder="商品简介" />
			</view>
			<view class="price_area">
				<input type="text" style="font-size: 48rpx; color: white" v-model="cardInfo.detail1" placeholder="价格相关信息"/>
			
			</view>
		</view>
		<view class="setup">
			<view class="">广告播放期间设置</view>
			<view class="times">
				<text>开始时间：</text>
				<uni-datetime-picker type="datetime" v-model="startTime" />
			</view>
			<view class="times">
				<text>结束时间：</text>
				<uni-datetime-picker type="datetime" v-model="endTime" />
			</view>
		</view>
		<view class="sendbtn">
			<button type="primary" @click="send">申请发布</button>
		</view>
		<view class="note"><text>
		本广告信息内容将在您所处位置500米半径范围内的用户公聊界面右下角轮播！
		</text>
			</view>
	</view></view>

</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			location: null,
			user: {},
			cardInfo: {
				pic: '',
				goodName: '',
				detail: '',
				detail1: '',
				detail2: ''
			},
			startTime: '',
			endTime: ''
		};
	},
	onLoad(res) {
		const product = JSON.parse(decodeURIComponent(res.cardInfo));
		console.log(product)
		this.user = getApp().globalData.user;
		this.location = getApp().globalData.location;
		if (product) {
		this.cardInfo.pic = product.dbPicPath;
		this.cardInfo.goodName = product.productName;
		this.cardInfo.detail = product.description;
		this.cardInfo.detail1 = product.price;
		this.cardInfo.productId=product.productId
		}
	},
	watch:{
		starTime:{
			handler(newVal){
				console.log('时间',newVal)
			}
		}
	},
	methods: {
		validateForm() {
					if (!this.cardInfo.goodName.trim()) {
						uni.showToast({ title: '请填写商品名称', icon: 'none' });
						return false;
					}
					if (!this.cardInfo.detail) {
						uni.showToast({ title: '请填写商品介绍', icon: 'none' });
						return false;
					}
					if (!this.startTime || !this.endTime) {
						uni.showToast({ title: '请选择完整时间范围', icon: 'none' });
						return false;
					}
					if (new Date(this.endTime) <= new Date(this.startTime)) {
						uni.showToast({ title: '结束时间需晚于开始时间', icon: 'none' });
						return false;
					}
					return true;
				},
		async send() {
			if (!this.validateForm()) return;
			try {
				
				const cardData = {
					startTime:new Date(this.startTime).getTime() ,
					endTime: new Date(this.endTime).getTime() ,
					createTime: Date.now(),
					sendUserId: this.user.userId,
					location: new db.Geo.Point(this.location.longitude, this.location.latitude),
					groupId: '',
					cardInfo:this.cardInfo
				};

				const {id} =await db.collection('goodShowCard').add(cardData);
			
				if (id) {
					uni.showToast({
						icon: 'none',
						title: '广告发布成功',
						duration: 3000
					});
					setTimeout(() => uni.navigateBack(), 2000);
				} else {
					uni.showToast({
						title: '发布失败'
					});
				}
			} catch (e) {
				console.error(e);
				uni.showToast({
					title: '发布失败'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.3);
}
.main_in {
	display: flex;
	margin-top: 50rpx;
	flex-direction: column;
    background-color: white;
	align-self: center;
	width: 480rpx;
	height: 640rpx;
	border-radius: 25rpx;
	align-items: center;
	
}

.card {
	display: flex;
	flex-direction: column;
	width: 440rpx;
	height: 600rpx;
	border-radius: 25rpx;
	align-items: center;
	justify-content: center;
	
}

.main_pic_box {
	height: 380rpx;
	width: 440rpx;
	border-top-left-radius: 25rpx;
	border-top-right-radius: 25rpx;
}

.main_pic {
	height: 380rpx;
	width: 440rpx;
	border-top-left-radius: 25rpx;
	border-top-right-radius: 25rpx;
}

.detail {
	height: 160rpx;
	width: 440rpx;
	padding: 10rpx;
	background-color: white;
}
.setup{
	display: flex;
	flex-direction: column;
	margin-top: 50rpx;
	padding: 25rpx;
	
}
.times{
	display: flex;
	width: 600rpx;
	height: 80rpx;
	padding-left: 10rpx;
	font-size: 25rpx;
	margin-bottom: 50rpx;
	align-items: center;
	justify-content: center;
	border-radius: 15rpx;
	background-color: white;
	font-size: 40rpx;
}
.price_area {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	width: 440rpx;
	border-radius: 50rpx;
	background-color: red;
}
.note{
	width: 500rpx;
	margin-top: 50rpx;
}
</style>
